<template>
  <div class="components-list" :class="placement" :style="width">

    <div class="box" :class="activeName ? 'open' : ''">
      <div class="head">
        <div class="title">{{ title }}{{ name ? `(${name})` : '' }}</div>
        <div @click="handleClose" class="close"><a-icon type="close" /></div>
      </div>
      <div class="content">
        <slot :activeName="activeName" />

      </div>
      <!-- <Page v-show="activeName === 'page'" /> -->
    </div>
    <div class="meun-list">
      <a-tooltip v-for="item in list" :key="item.id" v-show="item.isShow" :placement="placement">
        <template slot="title">
          <span>{{ item.title }}</span>
        </template>
        <div @click="()=> handleClick(item)" class="button" :class="activeName === item.id ? 'active' : ''"><a-icon :type="item.icon" /></div>
      </a-tooltip>

    </div>
    <DragWidthLine :enable="!!activePage" :placement="placement" @offsetXChange="handleOffsetXChange" />


  </div>
</template>

<script >
// import Page from "./Page"
import DragWidthLine from "./DragWidthLine"

export default {
  props: {
    list: {
      require: true,
      type: Array,
      default: () => []
    },
    placement: {
      type: String,
      default: "right"
    },
    name: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      // list: [
      //   {
      //     icon: "setting",
      //     title: "页面设置",
      //     id: "page"
      //   },

      // ],
      title: "",
      isShow: false,
      activePage: undefined,
      width: {}
    }
  },
  methods: {
    handleClick({id, title}){
      this.activePage = id
      this.title = title
    },
    handleClose(){
      this.activePage = undefined
      this.width = {
        width: `100%`
      }
    },
    handleOffsetXChange(offsetX) {
      // this.$el.width = this.$el.offsetWidth + offsetX
      if (this.activePage){
        this.width = {
          width: `${this.$el.offsetWidth + offsetX}px`
        }
      }
      else {
        this.width = {
          width: `100%`
        }
      }
    }
  },
  computed: {
    activeName() {
      const page = this.list.find(item => item.id === this.activePage)
      return page?.isShow ? this.activePage : undefined
    }
  },
  components: {
    DragWidthLine
  }

}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
